<template>
  <div class="content">
    <div class="top-contain">
        <div class="logoBlock">
        <!-- <el-avatar :size="50"></el-avatar>
                <div>用户名</div> -->
        <h1>最新回复</h1>
        </div>
    </div>
    <div class="m-contain">
        <el-timeline style="font-size: 20px">
            <el-timeline-item
            placement="top"
            v-for="(notification, index) in notificationList"
            :key="index"
            :type="(notification.status === true) ? 'success' : 'danger'"
            :size="'large'"
            :timestamp="notification.gmtCreate">
            <p>
                <span>{{notification.notifierName}} 回复了问题 </span><router-link :to="{path: '/forum/' + notification.questionId}" @click.native="readNotification(notification.id, notification.status)" style="text-decoration:none; color: #409EFF; font-size: 20px">{{notification.questionTitle}}</router-link>
            </p>
            </el-timeline-item>
        </el-timeline>

        <el-pagination
            background
            @size-change="siezChange"
            @current-change="currentChange"
            :page-size="pageSize"
            layout="prev, pager, next"
            :total="total">
        </el-pagination>

    </div>
  </div>
</template>

<script>
import cookie from "js-cookie";
import forumApi from '@/api/forum'

export default {
  data() {
    return {
        userInfo: {},
        notificationList: [],
        pageSize: 10,
        currentPage: 1,
        total: 0,
    }
  },

  created() {
    this.getUserInfo()
  },

  methods: {
    readNotification(notificationId, status) {
        if (status === false) {
            console.log('消息未读')
            //更新消息状态
            forumApi.updateStatus(notificationId).then(response => {

            })
            return
        }
    },

    siezChange(size) {
      this.pageSize = size;
      this.getNotificationList(this.userInfo.id, this.currentPage, this.pageSize);
    },
    currentChange(page) {
      this.currentPage = page;
      this.getNotificationList(this.userInfo.id, this.currentPage, this.pageSize);
    },

    //根据userId 查询消息通知(分页)
    getNotificationList(userId, page, size) {
        forumApi.getNotificationList(userId, page, size).then(response => {
            var data = response.data.data.maps
            this.notificationList = data.list
            this.total = data.total
        })
    },

    getUserInfo() {
      //从cookie获取用户信息
      var userStr = cookie.get('ucenter')
      // 把字符串转换json对象(js对象)
      if(userStr) {
        this.userInfo = (JSON.parse(userStr))
        this.getNotificationList(this.userInfo.id, this.currentPage, this.pageSize)
      }
    },
  },
}
</script>

<style scoped>
h1 {
  font-size: 28px;
  /* color: #7c7c7c; */
}

.content {
  /* 上 右 下 左 */
  margin: 10px 0px 450px 0px;
  /* padding-bottom: 100px; */
}

.top-contain {
  max-width: 1150px;
  margin: 0 auto;
  align-items: center;
  display: flex;
  position: relative;
}

.logoBlock {
  width: 10%;
  padding: 5px;
  display: inline-block;
}

.m-contain {
  max-width: 1150px;
  margin: 0 auto;
  margin-top: 20px;
}

.el-pagination {
  margin-top: 40px;
  margin-bottom: 40px;
}

</style>